<template>
  <div>
  <el-button type="primary">1主要按钮</el-button>
  <el-button type="text" @click="switchTo">2文字按钮</el-button>
  <el-table
    :data="tableData"
    style="width: 100%">
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
    {{msg}}
  </div>

</template>

<script>
  export default {
    name: 'MainFrame',
    data: function(){
      console.log("in data...")
        return {
          msg: 'Welcome to Your Vue.js App222123',
          tableData: []
        }
    },
    created: function() {
      console.log("in created...")
      this.$http.get('/api').then(function(res){
        // alert(res.data['name'])
        this.tableData = res.body
        alert(Object.keys(res.data))
      }, function(err){
        console.log(err)
      })
    },
    methods: {
      switchTo: function(event) {
        if (event){
          // alert(event.target.tagName)
          this.$router.push('/m');
        }
      }
    }
  }
</script>

<style>
  body{margin: 0;}
  #app {
    min-width: 1200px;
    margin: 0 auto;
    font-family: "Helvetica Neue","PingFang SC",Arial,sans-serif;
  }
  /* 头部导航 */
  header{z-index: 1000;min-width: 1200px;transition: all 0.5s ease;  border-top: solid 4px #3091F2;  background-color: #fff;  box-shadow: 0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04);  }
  header.header-fixed{position: fixed;top: 0;left: 0;right: 0;}
  header .el-menu-demo{padding-left: 300px!important;}

  /* 主内容区 */
  main{    display: -webkit-box;  display: -ms-flexbox;  display: flex;  min-height: 800px;  border: solid 40px #E9ECF1;  background-color: #FCFCFC;  }
  main .main-left{text-align: center;width: 200px;float: left;}
  main .main-right{-webkit-box-flex: 1;  -ms-flex: 1;  flex: 1;  background-color: #fff; padding: 50px 70px; }
  main .el-menu{background-color: transparent!important;}
</style>
